/* 全局样式变量和工具类 */

:root {
  /* 颜色变量 */
  --color-primary: #1890ff;
  --color-success: #52c41a;
  --color-warning: #faad14;
  --color-danger: #ff4d4f;
  --color-info: #909399;
  
  --color-text-primary: #333;
  --color-text-regular: #666;
  --color-text-secondary: #999;
  --color-text-placeholder: #ccc;
  
  --color-border: #dcdfe6;
  --color-background: #f5f7fa;
  --color-white: #ffffff;
  
  /* 字体大小 */
  --font-size-extra-large: 24px;
  --font-size-large: 18px;
  --font-size-medium: 16px;
  --font-size-small: 14px;
  --font-size-extra-small: 12px;
  
  /* 间距 */
  --spacing-extra-large: 32px;
  --spacing-large: 24px;
  --spacing-medium: 16px;
  --spacing-small: 12px;
  --spacing-extra-small: 8px;
  
  /* 圆角 */
  --border-radius-large: 8px;
  --border-radius-medium: 6px;
  --border-radius-small: 4px;
  
  /* 阴影 */
  --box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  --box-shadow-dark: 0 2px 8px rgba(0, 0, 0, 0.15);
  
  /* 动画 */
  --transition-base: all 0.3s ease;
  --transition-fast: all 0.15s ease;
}

/* 常用工具类 */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }
.text-info { color: var(--color-info); }

.bg-white { background-color: var(--color-white); }
.bg-primary { background-color: var(--color-primary); }
.bg-success { background-color: var(--color-success); }
.bg-warning { background-color: var(--color-warning); }
.bg-danger { background-color: var(--color-danger); }
.bg-info { background-color: var(--color-info); }

.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--spacing-extra-small); }
.mt-sm { margin-top: var(--spacing-small); }
.mt-md { margin-top: var(--spacing-medium); }
.mt-lg { margin-top: var(--spacing-large); }
.mt-xl { margin-top: var(--spacing-extra-large); }

.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--spacing-extra-small); }
.mb-sm { margin-bottom: var(--spacing-small); }
.mb-md { margin-bottom: var(--spacing-medium); }
.mb-lg { margin-bottom: var(--spacing-large); }
.mb-xl { margin-bottom: var(--spacing-extra-large); }

.p-xs { padding: var(--spacing-extra-small); }
.p-sm { padding: var(--spacing-small); }
.p-md { padding: var(--spacing-medium); }
.p-lg { padding: var(--spacing-large); }
.p-xl { padding: var(--spacing-extra-large); }

.flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.flex-between { display: flex; justify-content: space-between; }
.flex-around { display: flex; justify-content: space-around; }

.hidden { display: none; }
.invisible { visibility: hidden; }

/* 响应式工具类 */
@media (max-width: 768px) {
  .hidden-sm { display: none; }
  .flex-column-sm { flex-direction: column; }
}

@media (max-width: 576px) {
  .hidden-xs { display: none; }
  .text-center-xs { text-align: center; }
}